<template>
  <div class="manage-blacklist">
    <!-- 管理黑名单 -->
    <div class="container">
      <div class="model-title text-overflow">管理黑名单</div>
      <div class="form-box">
        <!-- 添加黑名单 -->
        <div class="list-title">添加黑名单</div>
        <div class="add-list list-box">
            <div class="list-cell">
                <span class="list-label">手机号码</span>
                <el-input v-model="add_phone" placeholder="请输入手机号码"></el-input>
            </div>    
            <div class="list-cell">
                <span  class="list-label">黑名单类型</span>
                <el-select v-model="add_type" placeholder="请选择类型">
                   <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                   ></el-option>
                </el-select>
            </div>      
            <div class="list-cell" style="text-align:center;">
                <el-button @click="addBlackList" type="danger">添加黑名单</el-button>
            </div> 
        </div>
        <!-- 查询黑名单 -->
        <div class="list-title">查询黑名单</div>
        <div class="query-one list-box">
            <div class="list-cell">
                <span class="list-label">手机号码</span>
                <el-input v-model="query_phone" placeholder="请输入手机号码"></el-input>
            </div>    
            <div class="list-cell">
                <span  class="list-label">黑名单类型</span>
                <el-select v-model="query_type" placeholder="请选择类型">
                   <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                   ></el-option>
                </el-select>
            </div>      
            <div class="list-cell" style="text-align:center;">
                <el-button @click="queryOne" type="danger">查询黑名单</el-button>
            </div> 
        </div>
        <div class="query-result">

        </div>
        <!-- 删除一个黑名单 -->
        <div class="list-title">删除黑名单</div>
        <div class="del-one list-box">
            <div class="list-cell">
                <span class="list-label">手机号码</span>
                <el-input v-model="del_phone" placeholder="请输入手机号码"></el-input>
            </div>    
            <div class="list-cell">
                <span  class="list-label">黑名单类型</span>
                <el-select v-model="del_type" placeholder="请选择类型">
                   <el-option
                    v-for="item in typeList"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                   ></el-option>
                </el-select>
            </div>      
            <div class="list-cell" style="text-align:center;">
                <el-button @click="delBlackList" type="danger">删除黑名单</el-button>
            </div> 
        </div>
        <!-- 查询所有黑名单 -->
        <div class="list-title">查询所有的黑名单列表</div>
        <div class="query-list">
            <div class="btn-box">
              <el-button @click="queryAll" type="danger">查询所有的黑名单列表</el-button>
            </div>
            <div class="blackList" v-loading="loading" v-if="blackList.length!==0">
                <el-table 
                    :data="blackList"
                    style="width: 100%"
                    highlight-current-row
                  >
                  <el-table-column
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column
                    v-for="cell in blackListHeader"
                    :key="cell.prop"
                    :property="cell.prop"
                    :label="cell.label"
                  >
                  </el-table-column>
                </el-table>
            </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name:'manage-blacklist',
  data () {
    return {
      loading:false,
        add_phone:"",
        add_type:"",
        query_phone:"",
        query_type:"",
        del_phone:"",
        del_type:"",
        typeList:[
          {label:"登录",value:"0"},
          {label:"支付",value:"1"},
          {label:"提现",value:"2"}
        ],
        blackList:[],
        blackListHeader:[
          {prop:"phone",label:"手机号"},
          {prop:"userid",label:"用户id"},
          {prop:"brandid",label:"代理商"},
          {prop:"operationType",label:"拉黑类型"},
          {prop:"createTime",label:"拉黑时间"}
        ]
    };
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    addBlackList(){
      // 添加黑名单
      if(this.add_phone===""||this.add_phone===null){
        this.$message.error("请输入需要拉黑的手机号");
        return;
      }
      if(this.add_type===""||this.add_type===null){
        this.$message.error("请输入需要拉黑类型");
        return;
      }
      let url = `risk/blackwhite/add`,
          params = `phone=${this.add_phone}&operation_type=${this.add_type}`;
      this.$Http.post(url,params).then(res=>{
           this.$notify.info({
                title: '提示',
                message:res.data.resp_message
            });
      }).catch(err=>{
          this.$notify.info({
                title: '错误',
                message:"添加黑名单失败！"
            });
      })
    },
    queryOne(){
      // 查询一个是不是黑名单
      if(this.query_phone===""||this.query_phone===null){
        this.$message.error("请输入需要查询的手机号");
        return;
      }
      if(this.query_type===""||this.query_type===null){
        this.$message.error("请输入需要查询类型");
        return;
      }
      let url = `risk/blackwhite/query/phone`,
          params = `phone=${this.query_phone}&operation_type=${this.query_type}`;
      this.$Http.post(url,params).then(res=>{

           this.$notify.info({
                title: '提示',
                message:res.data.resp_message
            });
      }).catch(err=>{
          this.$notify.info({
                title: '错误',
                message:"查询黑名单失败！"
            });
      })

    },
    delBlackList(){
      // 删除一个黑名单
      if(this.del_phone===""||this.del_phone===null){
        this.$message.error("请输入需要查询的手机号");
        return;
      }
      if(this.del_type===""||this.del_type===null){
        this.$message.error("请输入需要查询类型");
        return;
      }
      let url = `risk/blackwhite/del/phone`,
          params = `phone=${this.del_phone}&operation_type=${this.del_type}`;
      this.$Http.post(url,params).then(res=>{

           this.$notify.info({
                title: '提示',
                message:res.data.resp_message
            });
      }).catch(err=>{
          this.$notify.info({
                title: '错误',
                message:"查询黑名单失败！"
            });
      })
    },
    queryAll(){
      // 查询所有的黑名单用户
      this.loading =true;
      let url = `risk/blackwhite/query/all`,
          params = `size=1000`;
      this.$Http.post(url,params).then(res=>{
          this.loading =false;
        if(res.data.resp_code === "000000"){
            this.blackList = res.data.result.content;
        }else{
          this.$notify.info({
              title: '提示',
              message:res.data.resp_message
          });
        } 
      }).catch(err=>{
        this.loading =false;
        this.$notify.info({
            title: '错误',
            message:"查询黑名单失败！"
        });
      })
    }
  }
}

</script>
<style scoped>
.form-box{
  padding: 20px;
}
.list-box{
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.list-cell{
  width:30%;
  display: flex;
  align-items: center;
  padding: 30px 20px;
}
.list-label{
  display: inline-block;
  width: 100px;
}
.list-title{
  font-size: 16px;
  padding: 10px 20px;
  background-color: #ededed;
  border-left: 2px solid #cccccc;
}
.btn-box{
  padding: 10px ;
  text-align: center;
  border-bottom: 1px solid #ededed;
}
</style>